<template>
  <el-dialog v-bind="{ ...$attrs }" class="app-add">
    <el-form ref="ruleFormRef" :model="ruleForm" label-width="150px">
      <el-form-item label="是否过滤代理" prop="type">
        <el-switch v-model="ruleForm.isInterceptProxy"></el-switch>
      </el-form-item>
      <el-form-item label="类型" prop="type">
        <el-select v-model="ruleForm.countryFilterMode" style="width:300px" placeholder="请选择" clearable>
          <el-option label="只放行" :value="0"></el-option>
          <el-option label="只拦截" :value="1"></el-option>
        </el-select>
        <el-button style="margin-left:10px" type="primary" @click="ruleForm.countryFilterMode = ''">不限制IP归属地</el-button>
      </el-form-item>
      <el-form-item label=" 地区" prop="type">
        <div class="countryList">
          <div class="head">
            <div class="title">所有国家</div>
            <el-input style="width: 300px;" placeholder="请搜索" v-model="search" @change="handleChange">
              <template #suffix>
                <el-icon @click="handleChange">
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <ul>
            <el-empty v-if="!countryList.length"></el-empty>
            <li v-for="item of countryList" :class="{ active: ruleForm.country === item.countryEn }"
              @click="ruleForm.country = item.countryEn">
              {{ item.country }}
            </li>
          </ul>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('close')"> 关闭 </el-button>
      <el-button type="primary" @click="submitForm(ruleFormRef)"> 确认 </el-button>
    </template>
  </el-dialog>
</template>
 
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { setFilterIpCity } from '@/server/home'
import countryData from '../country.js'
const props: any = defineProps({
  id: {
    type: String,
    default: ''
  },
  info: {
    type: Object,
    default: {
      isInterceptProxy: false,
      countryFilterMode: '',
      country: ""
    }
  }
})
const emit = defineEmits<{ (event: 'close'): void; (event: 'success'): void; }>()
//定义属性
interface RuleForm {
  isInterceptProxy: boolean,
  countryFilterMode: number,
  country: string
}
//表单
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>(props.info)
const activeCode = ref('')
const search = ref('')
const countryList = ref(countryData)
//监听输入框
function handleChange() {
  const list = countryData.filter((x: any) => x.country.indexOf(search.value) !== -1 || x.region.indexOf(search.value) !== -1 || x.code.indexOf(search.value) !== -1)
  countryList.value = list
  console.log("🚀 ~ handleChange ~ list:", list)
}
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (typeof ruleForm.countryFilterMode == 'number') {
    if (!ruleForm.country) {
      return ElMessage.error("请选择放行或拦截国家")
    }
  }
  await setFilterIpCity(props.id, ruleForm)
  ElMessage.success("操作成功")
  emit("success")
}

</script>
<style lang="scss" scoped>
.el-dialog {
  height: 500px !important;
  overflow: auto;
  // .el-tabs{
  //   height: 400px;
  //   overflow: auto;
  // }
}

.btn {
  display: flex;
  align-items: flex-end;
  width: 100%;

  .el-input {
    flex: 1;
  }

  .el-button {
    margin-left: 0;
  }
}

.app-add {
  .el-tag {
    margin-top: 10px;
    margin-right: 10px;
  }
}

.countryList {
  width: 100%;

  .head {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;

    .title {
      font-weight: bold;
    }

    .el-input {
      width: 200px;
    }
  }

  ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    height: 400px;
    overflow: auto;

    li {
      width: 20%;
      cursor: pointer;
    }

    li.active {
      color: var(--el-color-primary);
    }

    li:hover {
      color: var(--el-color-primary);
    }
  }
}
</style>